<template>
	<view>
		<view class="shop-type">
			<cg-swiper :swiperList="catorylist" :swiperDots='true' :autoplay='false' @clickItem="clickItem"></cg-swiper>
		</view>
		<view class="shop_table_list">
			<view class="shop_table_item" v-for="(item,index) in shopList" :key='index' @click="openUrl('/merchants/detail/detail?store_id=' + item.id)">
				<view class="shop_table_item_left">
					<!-- <image :src="item.cover_url" mode="aspectFit"></image> -->
					<u-lazy-load :image="item.cover_url"></u-lazy-load>
				</view>
				<view class="shop_table_item_right">
					<view class="shop_table_item-name">
						{{item.name}}
					</view>
					<view class="shop_table_item-score">
						<view class="iconfont iconwujiaoxing" v-for="(i,index) in Number(item.score)"
							style="color: #fcc80e;" :key='index'></view>
						<view class="point" style="font-size: 28rpx;color: red;margin-left: 10rpx;">{{item.score}}
						</view>
					</view>
					<view class="shop_table_item_notice" v-if="item.config.rewards">
						消费100送<span style="font-size: 12pt;margin: 0 10rpx;font-weight: 600;">{{item.config.rewards}}</span>购物券
					</view>
					<view class="shop_table_item-location">
						<view style="width: 40rpx;height:40rpx;">
							<svg t="1720171465192" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4325">
								<path d="M512 174.08c-132.645926 0-240.165926 107.52-240.165926 240.165926 0 139.472593 173.795556 358.58963 225.754074 420.882963 7.49037 9.007407 21.428148 9.007407 28.918519 0C578.37037 772.93037 752.165926 553.718519 752.165926 414.245926 752.165926 281.6 644.645926 174.08 512 174.08zM522.334815 778.903704c-5.30963 6.542222-15.36 6.542222-20.66963 0C443.448889 706.939259 308.717037 528.118519 308.717037 415.099259c0-112.071111 91.211852-203.282963 203.282963-203.282963s203.282963 91.211852 203.282963 203.282963C715.282963 528.118519 580.551111 706.939259 522.334815 778.903704z" fill="#272536" p-id="4326"></path><path d="M512.948148 298.192593c-63.051852-0.568889-114.346667 50.725926-113.777778 113.777778 0.474074 61.25037 50.631111 111.312593 111.881481 111.881481 63.051852 0.568889 114.346667-50.725926 113.777778-113.777778C624.260741 348.823704 574.198519 298.761481 512.948148 298.192593zM512 485.925926c-41.339259 0-74.903704-33.564444-74.903704-74.903704s33.564444-74.903704 74.903704-74.903704 74.903704 33.564444 74.903704 74.903704S553.339259 485.925926 512 485.925926z" fill="#272536" p-id="4327"></path>
							</svg>
						</view>
						<text class="address">{{item.region_name}}</text>
						<text>|&nbsp;&nbsp;{{item.distance_format}}</text>
					</view>
				</view>
			</view>
			<!--加载loadding-->
			<main-loadmore :visible="loadding" :index="3" type="red"></main-loadmore>
			<main-nomore :visible="!pullUpOn" bgcolor="#FFFFFF"></main-nomore>
			<!--加载loadding-->
		</view>
		
		<view class="shop_table_list" v-if="!loading && shopList.length==0">
			<view class="logo" style="width: 350rpx;height: 300rpx;margin: 100rpx auto;">
				<image :src="img_url+'shop_new_home.png'" mode="aspectFit"
					style="display: block;width: 150rpx;height: 150rpx;margin: 0 auto;"></image>
				<text
					style="display: block;width: 100%;text-align: center;margin-top: 20rpx;font-size: 30rpx;color: #FF7104;">暂无门店</text>
			</view>
		</view>
		
		<hans-tabber style="position:fixed;bottom:0;width:100%;left:0;right:0;"></hans-tabber>
		<backTop :src="backTop.src"  :scrollTop="backTop.scrollTop"></backTop>
		
	</view>
</template>

<script>
	import hansTabber from '@/components/hans-tabbar/hans-tabbar.vue';
	import cgSwiper from '@/components/cg-swiper/cg-swiper.vue';
	import backTop from '@/components/back-top/back-top.vue';
	export default{
		components: {
			hansTabber,
			cgSwiper,
			backTop
		},
		data() {
			return {
				catorylist:[],
				shopList:[],
				loadding: false,
				pullUpOn: true,
				backTop: {
					src: '/static/back-top/top.png',
					scrollTop: 0
				},
				img_url: this.$api.img_url,
				form:{
					cat_id:''
				}
			}
		},
		onLoad(){
			this.getcatory();
			this.getshopList()
		},
		methods:{
			clickItem(e) {
				this.form.cat_id = e.id
				this.form.page = 1
				this.page_count = ''
				this.shopList = []
				this.getshopList()
			},
			getcatory() { //获取分类
				this.$http.request({
					url: this.$api.moreShop.getcategorylist,
					method: 'POST',
					data: '',
					showLoading: true
				}).then(res => {
					if (res.code == 0) {
						this.catorylist = res.data.list
					} else {
						this.$http.toast(res.msg);
					}
				});
			},
			getshopList() { //获取门店列表
				this.loading = true;
				this.$http.request({
					url: this.$api.moreShop.getshoplistall,
					method: 'POST',
					data: this.form,
				}).then(res => {
					this.loading = false;
					if (res.code == 0) {
						if (res.data.list.length == 0) return false
						let list = res.data.list;
						var arr = this.shopList.concat(list)
						this.shopList = arr
						this.page_count = res.data.pagination.page_count;
						this.pullUpOn=false
					} else {
						this.$http.toast(res.msg);
					}
				});
			},
			openUrl(url){
				uni.navigateTo({url,fail: (e) => {
					console.log(e)
				}});
			},
		},
		onPageScroll(e) {
			this.backTop.scrollTop = e.scrollTop;
		},
		onReachBottom() {
			this.loadding = true;
			this.pullUpOn = true;
			if (this.form.page == this.page_count) {
				this.loadding = false;
				this.pullUpOn = false;
				return false;
			}
			this.form.page = this.form.page + 1
			this.getshopList()
		}
	}
</script>

<style lang="less" scoped>
	@import url("../../plugins/font-icon/iconfont1.css");

	.shop-container {
		width: 100%;
		overflow: hidden;
	}

	.index1_content_top {
		width: 100%;
		display: flex;
		align-items: center;
		padding: 15px 15px 10px 15px;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
	}

	.index1_content_top_l {
		display: flex;
		font-size: 13px;
		font-weight: bold;
		color: #131313;
	}

	.index1_content_top_l_r {
		margin-left: 5px;
		width: 8px;
		height: 8px;
		border-top: 2px #FFF solid;
		border-right: 2px #fff solid;
		transform: rotate(135deg);
		margin-top: 3px;
		margin-bottom: 8px;
	}

	.index1_content_top_r {
		width: 60%;
		height: 29px;
		background: #F4F4F4;
		border-radius: 14px;
		font-size: 14px;
		margin-left: 15px;
		display: flex;
		align-items: center;
		padding-left: 15px;
	}

	.index1_content_top_r_input {
		width: 100%;
		font-size: 14px;
	}

	.shop-type {
		width: 100%;
		overflow: hidden;
		/* #ifdef H5*/
			margin-top: 0rpx;
		/* #endif */
		/* #ifdef APP-PLUS||MP */
			margin-top: 108rpx;
		/* #endif */
	}

	.shop-table {
		width: 100%;
		height: 100rpx;
		display: flex;
		justify-content: space-evenly;
		background: rgb(244, 244, 244);
	}

	.shop-table view {
		width: 30%;
		margin-top: 20rpx;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.shop-table view text {
		display: block;
		margin: 0 auto;
		width: 100%;
		text-align: center;
	}

	.shop-table view text:nth-of-type(2) {
		width: 80rpx;
		height: 5rpx;
	}

	.active {
		color: #FF7104;
	}

	.active text:nth-of-type(2) {
		background: #FF7104;
	}

	.shop_table_list {
		width: 100%;
		overflow: hidden;
		margin-bottom: 116rpx;
	}

	.shop_table_item {
		width: 95%;
		margin: 15rpx auto;
		background: #fff;
		display: flex;
		justify-content: space-evenly;
		overflow: hidden;
	}

	.shop_table_item_left {
		width: 30%;
		height: 200rpx;
		margin: 25rpx 0;
	}

	.shop_table_item_left image {
		width: 100%;
		display: block;
		height: 180rpx;
	}

	.shop_table_item_right {
		width: 64%;
		padding-left: 25rpx;
		box-sizing: border-box;
		margin: 15rpx 0 20rpx 0;
		position: relative;
	}

	.shop_table_item-name {
		width: 100%;
		font-size: 30rpx;
		color: #000;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}

	.shop_table_item_notice {
		font-size: 27rpx;
		color: rgb(255, 166, 0);
		margin-top: 15rpx;
		background: rgb(247, 236, 230);
		width: 80%;
		text-align: center;
		border-radius: 1rpx;
	}

	.shop_table_item-score {
		width: 100%;
		overflow: hidden;
		flex: 1;
		display: flex;
		align-items: center;
		margin-top: 10rpx;
	}

	.shop_table_item-location {
		width: 100%;
		overflow: hidden;
		font-size: 9pt;
		margin-top: 10rpx;
		display: flex;
		align-items: center;
	}
	.shop_table_item-location .address{
		width: 70%;
		overflow: hidden;
		-webkit-line-clamp: 1;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		text-overflow: ellipsis;
	}
	.shop_table_item-location image {
		display: inline-block;
		position: relative;
		top: 6rpx;
	}
</style>
